<template>
  <div class="search" ref="search">
    <input class="input" name="search" id="search" type="text" :placeholder="placeholder"
		  @focus="focus" @blur="blur"/>
		<label for="search">
			<img src="../../assets/img/search.svg" alt="">
		</label>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
          
       }
    },
    methods:{
      focus(){
				this.$refs.search.style.border="2px solid #000"
			},
			blur(){
				this.$refs.search.style.border=""
			}
    },
    components:{
       
    },
	props:{
		placeholder:{
			type:String,
			default(){
				return "搜索"
			}
		}
	}
  }
</script>

<style scoped>
	.search{
		border: var(--border-grey);
		display: flex;
		align-items: center;
		padding: 5px;
	}
	label{
		width: 10%;
	}
	img{
		width: 100%;
	}
	input{
		outline: none;
		width: 90%;
		border: 0;
		font-size: 18px;
		background: transparent;
	}
</style>
